<template>
<div class="rs-icons-picker rs-icons-picker--medium" v-clickoutside="hide">
    <div class="rs-icons-picker__trigger" @click="handleTrigger">
        <div class="rs-icons-picker-wrap">
            <!-- <i class="rs-icon-auth icon"></i> -->
            <i :class="[ value===''?'el-icon-plus':value, 'icon']"></i>
        </div>
    </div>
    <PickDropDown v-model="showPicker" placement="bottom"></PickDropDown>
</div>
</template>
<script>
import PickDropDown from './PickerDropDown'
import Clickoutside from 'element-ui/lib/utils/clickoutside';
export default {
    name:'RsIconPicker',
    components:{PickDropDown},
    directives: { Clickoutside },
    props:{
        rows:{
            type:Number,
            default:5
        },
        cols:{
            type:Number,
            default:8
        },
        icons:{
            type:Array,
            default:function(){
                return []
            }
        },
        value:{
            type:String,
            default:''
        }
    },
    data(){
        return{
            showPicker:false
        }
    },
    methods:{
        handleTrigger(){
            this.showPicker = !this.showPicker;
        },
        hide(){
            this.showPicker = false;
        },
        selectIcon(icon){

            this.$emit('input',icon)
            this.$emit('select',icon)
            this.showPicker = false;
        }
    }
}
</script>